<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

	<ui:composition template="/templates/baseLayout.xhtml">
		<ui:define name="pageTitle">Upload Photos</ui:define>
		<ui:define name="messagesBox">
			<h:messages infoClass="msginfo" warnClass="msgwarn" errorClass="msgerror" 
						showSummary="true" style=" list-style: none;"/>
		</ui:define>
		<ui:define name="pageBody">
			<h:outputStylesheet>
		        .navPanel {
			        position:absolute;
			        bottom:0;
			        height:23px;
			        margin:0;
			        padding:2px;
		        }	 
		        .tabDiv {
			        margin-right: 5px;
			        border: 1px solid #{richSkin.panelBorderColor};
			        background-color: #{richSkin.headerBackgroundColor};
			        cursor: pointer;
			        padding-left: 5px;
			        float: left;
		        }
		        .label {
				    font-weight: bold;
				}				
		    </h:outputStylesheet>
			<h:outputScript target="head">
				jQuery.noConflict();				
			</h:outputScript>
						
			<h:panelGrid id="WizardGrid" width="100%" cellspacing="0" cellpadding="0">
				<rich:panel>
		            <h:form>
						<rich:togglePanel id="panel1" activeItem="item1" render="tabs" switchType="ajax" style="align: center;">
				            <rich:togglePanelItem name="item1">
				                <!-- UPLOAD IMAGES -->
				                <ui:include src="/pages/photos/uploadPhotos.xhtml"></ui:include>
				            </rich:togglePanelItem>
				            <rich:togglePanelItem name="item3">
				                <!-- SELECT A STUDIO -->
				                <ui:include src="/pages/photos/selectStudio.xhtml"></ui:include>
				            </rich:togglePanelItem>
				            <rich:togglePanelItem name="item4">
				                <!-- MAKE PAYMENT -->
				                <ui:include src="/pages/photos/finalizeOrder.xhtml"></ui:include>
				            </rich:togglePanelItem>
				        </rich:togglePanel>
				    </h:form>
				</rich:panel>
	    	</h:panelGrid>	    			    	
		</ui:define>
	</ui:composition>
</html>						